<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="treeMenu"></div>

<script>
    const menuData = [
        {
            label: '一级菜单1',
            children: [
                { label: '二级菜单1-1' },
                { label: '二级菜单1-2', children: [
                        { label: '三级菜单1-2-1' }
                    ]}
            ]
        },
        {
            label: '一级菜单2',
            children: [
                { label: '二级菜单2-1' },
                { label: '二级菜单2-2' }
            ]
        }
    ];
    function createTreeMenu(data, container) {
        // 创建顶级 ul 元素
        const ul = document.createElement('ul');

        data.forEach(item => {
            const li = document.createElement('li');
            li.textContent = item.label;

            // 如果存在子菜单，则递归创建子菜单
            if (item.children && item.children.length) {
                createTreeMenu(item.children, li); // 递归调用
            }

            ul.appendChild(li);
        });

        container.appendChild(ul);
    }

    // 调用函数并传入数据和容器
    const treeContainer = document.getElementById('treeMenu');
    createTreeMenu(menuData, treeContainer);
</script>

</body>
</html>